<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新增表格内容并获取数据提交</title>
		<style>
			table {
				margin: 10px;
				border-collapse: collapse;
			}
			
			td {
				padding: 6px;
			}
		</style>

	</head>

	<body>
		<div>
			<button id="add">增加</button>
			<button id="del">删除</button>
			<button id="submit">提交</button>
		</div>
		<table border="1">
			<thead>
				<tr>
					<td><input id="allChecked" type="checkbox" /></td>
					<td>账户</td>
					<td>开户行</td>
					<td>交易金额</td>
					<td>交易笔数</td>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>

		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var selectValue = []; //提交的对象
				var isAllSelect = false; //是否全选
				var inputCheck = []; //复选框checked值
			
				//添加内容
				$('#add').on('click', function() {
					var trTd = $('<tr class="addTr"><td><input class="checkBtn" type="checkbox" /></td><td>' + tableContent.zhagnHu + '</td><td>' + tableContent.kaiHuHang + '</td><td>' + tableContent.jiaoYiJinE + '</td><td>' + tableContent.jiaoYiBiShu + '</td><tr>');
					$('#tbody').append(trTd);
				});

				//全选和取消全选
				$('#allChecked').on('click', function() {
					if(isAllSelect == false) {
						$(".checkBtn").prop('checked', true);
						isAllSelect = true;
					} else {
						$(".checkBtn").prop('checked', false);
						isAllSelect = false;
					}
				});

				//单选
				$('#tbody').on('click', '.checkBtn', function() {
					var ischecked = $(this).prop('checked');
					inputCheck = []; //重置数组

					//遍历复选框的checked值
					$(".checkBtn").each(function() {
						inputCheck.push($(this).prop('checked'));
					})

					//判断是否全选
					if(inputCheck.indexOf(false) == -1) {
						$("#allChecked").prop('checked', true);
						isAllSelect = true;
					} else {
						$("#allChecked").prop('checked', false);
						isAllSelect = false;
					}
				});

				//提交
				$('#submit').on('click', function() {
					var tdObject = {}; //提交获取的对象值
					selectValue = [];
					//判断选中
					$(".checkBtn").each(function() {
						if($(this).prop('checked') == true) {
							var tdValue = $(this).parents('tr').children('td');
							//获取数据
							tdObject = {
								zhagnHu: tdValue.eq(1).text(),
								kaiHuHang: tdValue.eq(2).text(),
								jiaoYiJinE: tdValue.eq(3).text(),
								jiaoYiBiShu: tdValue.eq(4).text()
							}
							//将表格数据添加到对象中
							selectValue.push(tdObject);
						}
					})
					
					console.log(selectValue);
				});
			})

			//模拟数据
			var tableContent = {
				zhagnHu: 'fjw',
				kaiHuHang: '北京银行',
				jiaoYiJinE: '5000',
				jiaoYiBiShu: '2'
			}
		</script>
	</body>

</html>